<template>
    <div class="sideBody">
        <div class="sideBody-header">
            <flexbox :gutter="0">
                <flexbox-item @click.native="handleHrefTo">
                    <div class="flex-header">
                        <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.90rem;height:.90rem;vertical-align:-0.08rem">
                            <use xlink:href="#icon-bianji-copy-copy"></use>
                        </svg>
                        <div class="flex-header__bottom">
                            编辑资料
                        </div>
                    </div>
                </flexbox-item>
                <flexbox-item>
                    <div class="flex-header">
                        <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.90rem;height:.90rem;vertical-align:-0.08rem">
                            <use xlink:href="#icon-tianjiahaoyou"></use>
                        </svg>
                        <div class="flex-header__bottom">
                            添加好友
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="sideBody-body">
            <flexbox orient="vertical">
                <flexbox-item>
                    <div class="flex-body">
                        <group>
                            <cell title="我的好友" is-link link="/friends">
                                <svg  class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.60rem;height:.60rem;margin-right: .2rem;vertical-align:-0.08rem">
                                    <use xlink:href="#icon-haoyou"></use>
                                </svg>
                            </cell>
                        </group>
                    </div>
                </flexbox-item>
                <flexbox-item>
                    <div class="flex-body">
                        <group>
                            <cell title="狗币银行" is-link link="/bank">
                                <svg  class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.60rem;height:.60rem;margin-right: .2rem;vertical-align:-0.08rem">
                                    <use xlink:href="#icon-qian1"></use>
                                </svg>
                            </cell>
                        </group>
                    </div>
                </flexbox-item>
                <flexbox-item>
                    <div class="flex-body">
                        <group>
                            <cell title="交友设定" is-link link="/setting">
                                <svg  class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.60rem;height:.60rem;margin-right: .2rem;vertical-align:-0.08rem">
                                    <use xlink:href="#icon-shezhi"></use>
                                </svg>
                            </cell>
                        </group>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem, Cell,Group } from 'vux'
import { mapState } from 'vuex'
export default {
    name: "SideBarBody",
    components: {
        Flexbox,
        FlexboxItem,
        Group,
        Cell,
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    },
    methods: {
        handleHrefTo () {
            console.log(this.userInfo)
            this.$router.push({path: '/setInfo/'+this.userInfo.userid})
        }
    },
    mounted () {
        console.log(this.userInfo)
    }
}
</script>


<style lang="stylus" scoped>
.flex-body >>> .weui-cells
    background: #fffff8
    &:before
        border-top: 0
    &:after
        border-bottom: 0
.sideBody-body >>> .vux-flexbox-item
    margin-top: 0!important
        
.sideBody
    .sideBody-header
        background: #fffdf1
        margin-bottom: .25rem
        .flex-header
            text-align: center
            padding: .1rem 0 .2rem
            .flex-header__bottom
                font-size: .12rem
    .sideBody-body    
        .flex-body
            height: .80rem
            width: 100%
            line-height: .80rem
            margin-bottom: .2rem
           



</style>